<template>
  <div class="box">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="道路信息" name="a"></el-tab-pane>
        <el-tab-pane label="桥涵信息" name="b"></el-tab-pane>
        <el-tab-pane label="管廊信息" name="c"></el-tab-pane>
        <el-tab-pane label="专业工程信息" name="d"></el-tab-pane>
        <el-tab-pane label="投资信息" name="e"></el-tab-pane>
        <el-tab-pane label="资金信息" name="f"></el-tab-pane>
        <el-tab-pane label="企业信息" name="g"></el-tab-pane>
        <el-tab-pane label="协同大厅" name="h"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <collaborativeHall :id="projectId" v-if="activeName == 'h'" />
      <road :id="projectId" v-if="activeName == 'a'" />
      <bridge :id="projectId" v-if="activeName == 'b'" />
      <pipegallery :id="projectId" v-if="activeName == 'c'" />
      <professional :id="projectId" v-if="activeName == 'd'" />
      <investment :id="projectId" v-if="activeName == 'e'" />
      <financial :id="projectId" v-if="activeName == 'f'" />
      <information :id="projectId" v-if="activeName == 'g'" />
    </div>
  </div>
</template>
<script>
import collaborativeHall from "./components/collaborativeHall.vue";
import road from "../../views/road/index.vue";
import bridge from "../bridge/index.vue";
import pipegallery from "../pipegallery/index.vue";
import professional from "../professional/index.vue";
import investment from "../investment/index.vue";
import financial from "../financial/index.vue";
import information from "../information/index.vue";
export default {
  components: {
    collaborativeHall, //协同大厅
    road, //道路信息
    bridge, //桥涵信息
    pipegallery, //管廊信息
    professional, //专业工程信息
    investment, //投资信息
    financial, //资金信息
    information, //企业信息
  },
  data() {
    return {
      activeName: "h",
      projectId: 0,
    };
  },
  mounted() {
    // this.projectId = Number(this.$route.query.projectId);
    this.projectId = localStorage.getItem('id')

    console.log(this.projectId, localStorage.getItem('id'));
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;

  // padding: 15px;
  // box-sizing: border-box;
  .top {
    height: 60px;
  }

  .content {
    height: calc(100% - 60px);
    display: flex;
  }
}
</style>
